前一章節30天Flutter手滑系列 - 聊天室開發(Chat Room)(3)，已經可以成功登入Google帳號，並且取得帳號資訊，接下來用這些資料更新一下原本的介面。

更新Drawer

在原本DrawerHeader的地方，我們用靜態方式產生了一個假的帳號欄位。
待登入後，我們可以利用儲存在Firebase的帳號資料來更新這一部分。
而要更新很簡單，只需用前面章節提到的StreamBuilder這個Widget，而stream的資料來自於Firestore.instance.collection('users').snapshots()。

StreamBuilder(
    stream: Firestore.instance.collection('users').snapshots(),
    ...
})

而在builder內，我們接受兩個參數，並且加入判斷snapshot.hasData是否有值。
若有值則找到photoUrl的欄位並且顯示使用者圖片

builder: (context, snapshot) {
if (snapshot.hasData) {
    return CachedNetworkImage(
        placeholder: (context, url) => Container(
        child: CircularProgressIndicator(
        strokeWidth: 1.0,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
        ),
        width: 50.0,
        height: 50.0,
        padding: EdgeInsets.all(15.0),
        ),
        imageUrl: snapshot.data.documents[0]['photoUrl'],
        width: 50.0,
        height: 50.0,
        fit: BoxFit.cover,
    );
} else {
    return CircleAvatar(
        child: Text('UN'),
    );
}

CachedNetworImage為一個cached_network_image套件。

顯示線上使用者

同樣我們在欲顯示的地方加上StreamBuilder，在這裡我們加在Scaffold的body。
如果snapshot.hasData有資料，我們要產生一個ListView，用來存放已登入的使用者。

body: Container(
    child: Container(
        child: StreamBuilder(
        stream: Firestore.instance.collection('users').snapshots(),
        builder: (context, snapshot) {
            if (!snapshot.hasData) {
                return Center(
                    child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(themeColor),
                    ),
                );
             } else {
                return ListView.builder(
                    padding: EdgeInsets.all(10.0),
                    itemBuilder: (context, index) => buildItem(context, snapshot.data.documents[index]),
                    itemCount: snapshot.data.documents.length,
             );
         }
       },
    ),
  )
)

參考資料

https://blog.csdn.net/yumi0629/article/details/82759447
https://pub.dev/packages/cloud_firestore